<!DOCTYPE html>
<html>
<head>   
    <title>logs</title>     
    <script type="text/javascript" src="../javascript/page/Child.js"></script>
    <style type="text/css">
        html, body {
            font-size: 12px;  background-color: #f1f1f1;
        }
        .logContent {
            font-size: 12px; 
            padding-left: 5%;
            padding-right:10%;
            color: rgb(144, 192, 194);         
            max-width: 85%;  
            max-height: 150px;
            overflow-y: auto;
            border: #f1f1f1 1px solid;
        }
    </style>
</head>
<body onload="docLoaded();">
    <div id="queryForm" class="title_bar">
        <template>
            <div class="query_form">
                <el-form :inline="true" :model="searchData" class="demo-form-inline" size="mini">
                    <el-form-item label="Date">
                        <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                      </el-date-picker>
                    </el-form-item> 
                    <el-form-item label="EventType">
                        <el-select v-model="searchData.eventType" placeholder="please select type">
                            <el-option v-for="item in eventTypeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="EventSource">
                        <el-input v-model="searchData.eventSource" placeholder="Event source"></el-input>
                    </el-form-item> 
                    <el-form-item label="EventName">
                        <el-input v-model="searchData.eventName" placeholder="Event name"></el-input>
                    </el-form-item>  
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">Query</el-button>
                    </el-form-item>
                </el-form>
            </div>       
            <div class="hline"></div>
            <div class="panel">              
                <el-table :data="tableData" style="width: 100%" max-height="660">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                          <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="LogDetail:">                              
                              <div class="logContent">{{ props.row.eventData }}</div>
                            </el-form-item>                          
                          </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="ID" min-width="5%"></el-table-column>
                    <el-table-column prop="eventType" label="EventType" min-width="6%"></el-table-column>
                    <el-table-column prop="eventName" label="EventName" min-width="14%"></el-table-column>                 
                    <el-table-column prop="eventSource" label="Source" min-width="5%"></el-table-column>   
                    <el-table-column prop="eventData" label="LogData" min-width="25%" show-overflow-tooltip></el-table-column>      
                    <el-table-column prop="createBy" label="CreateBy" min-width="10%"></el-table-column>   
                    <el-table-column prop="createTime" label="CreateTime" min-width="25%"></el-table-column>               
                </el-table>                 
            </div>   
            <div class="status_bar" style="text-align: left;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchData.pageNum"
                    :page-sizes="[5, 10, 15]"
                    :page-size="searchData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
                </el-pagination> 
            </div>           
        </template>
    </div>
    <script type="text/javascript">
        var router = startPage();       
        function docLoaded() {
            var queryApp = new Vue({el: '#queryForm', data: {   
                    dateRange: "",                            
                    searchData:{ 
                        eventType:0,
                        eventSource:"",
                        eventName:"",
                        beginTime: null, 
                        endTime: null, 
                        pageNum:1,
                        pageSize:5
                    },
                    pageInfo:{
                        totalPage:0,
                        total:0
                    },
                    tableData:[],
                    eventTypeList: [{name:"default",value:0}],
                    eventSourceList: [{name:"system",value:0}]                                    
                },
                methods: {     
                    onSubmit:function(event){
                        this.searchData.pageNum = 1;
                        this.loadTableData(event);
                    },        
                    loadTableData:function(event){ 
                        if(this.dateRange && this.dateRange.length > 1){
                            this.searchData.beginTime = javaDateFmt(this.dateRange[0]);
                            this.searchData.endTime = javaDateFmt(this.dateRange[1]); 
                        }                       
                        httpPost(apiLogPage(this,router.authInfo,JSON.stringify(this.searchData))).success(function(res,context){ 
                            parseAndCheckResult(context,res);
                        }).then(function(status, res, context){context.$message.error(res);});
                    },
                    handleSizeChange(val) {                     
                        this.searchData.pageSize = val;
                        this.loadTableData();
                    },
                    handleCurrentChange(val) {
                        this.searchData.pageNum = val;
                        this.loadTableData();
                    }
                }
            }); queryApp.onSubmit();//init end.
        } 

        function parseAndCheckResult(vApp, res){
            var resObj = JSON.parse(res); 
            if(resObj.code != SUCCESS_CODE){
                return false;
            }
            if(resObj.pageInfo){
                vApp.pageInfo.total = resObj.pageInfo.total;
                vApp.pageInfo.totalPage = resObj.pageInfo.totalPage;
            }
            if(resObj.data){                
                var arrayObj = new Array();
                for(var item of resObj.data){
                    var dateStr = dateFmt("yyyy-MM-dd HH:mm:ss", new Date(item.createTime));
                    arrayObj.push({
                        id:item.id,
                        eventType:item.eventType,                        
                        eventName:item.eventName,    
                        eventSource:item.eventSource,   
                        eventData:item.eventData,                          
                        createBy:item.createBy,                                                                 
                        createTime:dateStr});
                }
                vApp.tableData = arrayObj;
            }
            return resObj;
        }       
    </script>
</body>
</html>
